<template>
    <el-dialog v-model="visible" title="修改客户信息" width="600px" :close-on-click-modal="false">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="form-container">
            <el-form-item label="客户ID">
                <el-input v-model="form.clientId" disabled />
            </el-form-item>

            <el-form-item label="客户姓名">
                <el-input v-model="form.name" disabled />
            </el-form-item>

            <el-form-item label="性别" prop="gender">
                <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                </el-select>
            </el-form-item>

            <el-form-item label="出生日期" prop="birthdate">
                <el-date-picker v-model="form.birthdate" placeholder="选择出生日期" value-format="YYYY-MM-DD" />
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄" />
            </el-form-item>

            <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="form.idNumber" placeholder="请输入身份证号" />
            </el-form-item>

            <el-form-item label="血型" prop="bloodType">
                <el-input v-model="form.bloodType" placeholder="请输入血型" />
            </el-form-item>

            <el-form-item label="家属联系方式" prop="familyContact">
                <el-input v-model="form.familyContact" placeholder="请输入联系方式" />
            </el-form-item>

            <el-form-item label="电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineEmits, defineExpose, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {inject} from 'vue'
const axios = inject("axios")
import qs from 'qs'

const visible = ref(false)
const form = ref({})
const formRef = ref()
const emit = defineEmits(['success'])

const rules = {
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    birthdate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
    age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    idNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    bloodType: [{ required: true, message: '请输入血型', trigger: 'blur' }],
    familyContact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入电话', trigger: 'blur' }]
}

/** 弹窗打开方法 */
const open = (row) => {
    visible.value = true
    form.value = { ...row }
}

/** 确认按钮：提交修改 */
const handleConfirm = async () => {
    try {
        await formRef.value.validate()

        const res = await axios.post(
            '/client/update',
            qs.stringify(form.value),
            {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }
        )

        if (res.data.status === 200) {
            ElMessage.success('修改成功')
            visible.value = false
            emit('success')
        } else {
            ElMessage.error(res.data.msg || '修改失败')
        }
    } catch (err) {
        // 表单验证失败提示
        ElMessageBox.alert(
            '存在未填写或不规范的字段，请检查后再提交！',
            '验证失败',
            {
                confirmButtonText: '确定',
                type: 'warning'
            }
        )
    }
}

defineExpose({ open })

watch(() => form.value.birthdate, (newVal) => {
    if (newVal) {
        form.value.age = calcAge(newVal)
    } else {
        form.value.age = ''
    }
})
function calcAge(birthdate) {
  if (!birthdate) return ''
  const birth = new Date(birthdate)
  const today = new Date()
  let age = today.getFullYear() - birth.getFullYear()
  const m = today.getMonth() - birth.getMonth()
  if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
  return age > 0 ? age : 0
}
watch
</script>

<style scoped>
.el-input {
    width: 100%;
}

.el-dialog__body {
    padding: 20px 24px 10px 24px;
    background: #f5f7fa;
}

.el-dialog__header {
    background: #f9fafc;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.el-form-item {
    margin-bottom: 18px;
}

.el-dialog__footer {
    padding: 12px 24px 20px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.el-button {
    min-width: 80px;
}
</style>
